<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>割叶机PLC控制系统</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body { 
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
            color: white;
            min-height: 100vh;
            padding: 20px;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
        }
        
        .header { 
            text-align: center;
            margin-bottom: 30px;
        }
        
        .header h1 {
            font-size: 2.5em;
            margin-bottom: 10px;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
        }

        .status-bar {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-bottom: 30px;
            flex-wrap: wrap;
        }

        .status-item {
            background: rgba(255,255,255,0.1);
            padding: 10px 20px;
            border-radius: 25px;
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255,255,255,0.2);
        }

        .status-connected {
            background: rgba(76, 175, 80, 0.3);
        }

        .status-disconnected {
            background: rgba(244, 67, 54, 0.3);
        }

        .main-content {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 30px;
            margin-bottom: 30px;
        }

        @media (max-width: 768px) {
            .main-content {
                grid-template-columns: 1fr;
            }
        }

        .control-panel, .sensor-panel {
            background: rgba(255,255,255,0.1);
            padding: 25px;
            border-radius: 15px;
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255,255,255,0.2);
        }

        .panel-title {
            font-size: 1.5em;
            margin-bottom: 20px;
            text-align: center;
            color: #fff;
        }

        /* WASD控制区域 */
        .wasd-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 15px;
            margin-bottom: 30px;
        }

        .wasd-grid {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            grid-template-rows: 1fr 1fr 1fr;
            gap: 10px;
            width: 200px;
            height: 200px;
        }

        .wasd-key {
            background: linear-gradient(145deg, #4CAF50, #45a049);
            border: none;
            border-radius: 10px;
            color: white;
            font-size: 1.2em;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.2s;
            box-shadow: 0 4px 8px rgba(0,0,0,0.3);
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .wasd-key:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 12px rgba(0,0,0,0.4);
        }

        .wasd-key:active, .wasd-key.active {
            transform: translateY(0);
            background: linear-gradient(145deg, #45a049, #4CAF50);
            box-shadow: 0 2px 4px rgba(0,0,0,0.3);
        }

        .key-w { grid-column: 2; grid-row: 1; }
        .key-a { grid-column: 1; grid-row: 2; }
        .key-s { grid-column: 2; grid-row: 2; }
        .key-d { grid-column: 3; grid-row: 2; }

        .movement-display {
            background: rgba(0,0,0,0.3);
            padding: 15px;
            border-radius: 10px;
            text-align: center;
            margin-top: 15px;
        }

        .movement-values {
            display: flex;
            justify-content: space-around;
            margin-top: 10px;
        }

        .movement-value {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .value-label {
            font-size: 0.9em;
            opacity: 0.8;
            margin-bottom: 5px;
        }

        .value-number {
            font-size: 1.5em;
            font-weight: bold;
            color: #4CAF50;
        }

        /* 控制按钮区域 */
        .control-buttons {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 15px;
            margin-top: 20px;
        }

        .control-btn {
            background: linear-gradient(145deg, #2196F3, #1976D2);
            border: none;
            padding: 12px;
            border-radius: 8px;
            color: white;
            font-size: 0.9em;
            cursor: pointer;
            transition: all 0.2s;
            box-shadow: 0 2px 4px rgba(0,0,0,0.3);
        }

        .control-btn:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 8px rgba(0,0,0,0.4);
        }

        .control-btn:active {
            transform: translateY(0);
        }

        .control-btn.active {
            background: linear-gradient(145deg, #4CAF50, #45a049);
        }

        /* 传感器数据区域 */
        .sensor-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 15px;
        }

        .sensor-item {
            background: rgba(0,0,0,0.3);
            padding: 15px;
            border-radius: 8px;
            text-align: center;
        }

        .sensor-label {
            font-size: 0.9em;
            opacity: 0.8;
            margin-bottom: 8px;
        }

        .sensor-value {
            font-size: 1.3em;
            font-weight: bold;
            color: #4CAF50;
        }

        .sensor-unit {
            font-size: 0.8em;
            opacity: 0.7;
            margin-left: 5px;
        }

        /* 速度控制滑块 */
        .speed-control {
            margin: 20px 0;
            text-align: center;
        }
        
        .speed-slider {
            width: 100%;
            margin: 10px 0;
            -webkit-appearance: none;
            height: 8px;
            border-radius: 4px;
            background: rgba(255,255,255,0.3);
            outline: none;
        }

        .speed-slider::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: #4CAF50;
            cursor: pointer;
        }

        .speed-slider::-moz-range-thumb {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: #4CAF50;
            cursor: pointer;
            border: none; 
        }

        /* 响应式设计 */
        @media (max-width: 480px) {
            .wasd-grid {
                width: 150px;
                height: 150px;
            }
            
            .wasd-key {
                font-size: 1em;
            }
            
            .sensor-grid {
                grid-template-columns: 1fr;
            }
        }

        /* 动画效果 */
        .fade-in {
            animation: fadeIn 0.5s ease-in;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .pulse {
            animation: pulse 2s infinite;
        }

        @keyframes pulse {
            0% { opacity: 1; }
            50% { opacity: 0.7; }
            100% { opacity: 1; }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>🚜 割叶机PLC控制系统</h1>
            <div class="status-bar">
                <div class="status-item" id="rk3588-status">
                    <span>RK3588: </span><span id="rk3588-text">未连接</span>
                </div>
                <div class="status-item" id="plc-status">
                    <span>PLC: </span><span id="plc-text">未连接</span>
                </div>
                <div class="status-item" id="control-mode">
                    <span>控制模式: </span><span id="mode-text">本地</span>
                </div>
            </div>
        </div>

        <div class="main-content">
            <!-- 控制面板 -->
            <div class="control-panel fade-in">
                <h2 class="panel-title">🎮 运动控制</h2>
                
                <!-- WASD控制 -->
                <div class="wasd-container">
                    <div class="wasd-grid">
                        <button class="wasd-key key-w" data-key="w" data-direction="forward">W<br>前进</button>
                        <button class="wasd-key key-a" data-key="a" data-direction="left">A<br>左转</button>
                        <button class="wasd-key key-s" data-key="s" data-direction="backward">S<br>后退</button>
                        <button class="wasd-key key-d" data-key="d" data-direction="right">D<br>右转</button>
                </div>
                
                    <div class="movement-display">
                        <div style="font-weight: bold; margin-bottom: 10px;">当前运动状态</div>
                        <div class="movement-values">
                            <div class="movement-value">
                                <div class="value-label">前进/后退</div>
                                <div class="value-number" id="forward-value">0</div>
                                </div>
                            <div class="movement-value">
                                <div class="value-label">左转/右转</div>
                                <div class="value-number" id="turn-value">0</div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- PLC连接控制区域 -->
                <div class="control-buttons" style="margin-top: 30px; border-top: 2px solid rgba(255,255,255,0.2); padding-top: 20px;">
                    <button class="control-btn" id="check-usb" style="background: linear-gradient(145deg, #9C27B0, #7B1FA2);">
                        🔍 检测USB设备
                    </button>
                    <button class="control-btn" id="connect-plc" style="background: linear-gradient(145deg, #4CAF50, #45a049);" disabled>
                        🔌 连接PLC
                    </button>
                    <button class="control-btn" id="refresh-sensors" style="grid-column: 1 / -1; background: linear-gradient(145deg, #FF9800, #F57C00);" disabled>
                        📊 读取PLC数据
                    </button>
                </div>
                
                <!-- 控制按钮区域 -->
                <div class="control-buttons" style="margin-top: 20px; border-top: 2px solid rgba(255,255,255,0.2); padding-top: 20px;">
                    <button class="control-btn" id="toggle-authority" style="background: linear-gradient(145deg, #2196F3, #1976D2);" disabled>
                        🔒 切换控制权限
                    </button>
                    <button class="control-btn" id="toggle-water-spray" style="background: linear-gradient(145deg, #00BCD4, #0097A7);" disabled>
                        💧 喷水控制
                    </button>
                    <button class="control-btn" id="continuous-forward" style="grid-column: 1 / -1; background: linear-gradient(145deg, #FF5722, #E64A19);" disabled>
                        🚀 持续前进测试 (5秒)
                    </button>
                </div>
                
                <!-- 连接状态提示 -->
                <div id="connection-status" style="text-align: center; margin-top: 15px; padding: 10px; background: rgba(255,152,0,0.2); border-radius: 8px;">
                    <small style="color: #FFB74D;">⏸️ 请先检测USB设备，然后连接PLC</small>
                </div>
            </div>

            <!-- 传感器面板 -->
            <div class="sensor-panel fade-in">
                <h2 class="panel-title">📊 传感器数据</h2>
                
                <div class="sensor-grid">
                    <div class="sensor-item">
                        <div class="sensor-label">发电机电压</div>
                        <div class="sensor-value">
                            <span id="generator-voltage">0</span>
                            <span class="sensor-unit">V</span>
                        </div>
                    </div>
                    
                    <div class="sensor-item">
                        <div class="sensor-label">发电机电流</div>
                        <div class="sensor-value">
                            <span id="generator-current">0</span>
                            <span class="sensor-unit">A</span>
                </div>
            </div>

                    <div class="sensor-item">
                        <div class="sensor-label">发电机功率</div>
                        <div class="sensor-value">
                            <span id="generator-power">0</span>
                            <span class="sensor-unit">W</span>
                        </div>
                    </div>
                    
                    <div class="sensor-item">
                        <div class="sensor-label">发电机温度</div>
                        <div class="sensor-value">
                            <span id="generator-temp">0</span>
                            <span class="sensor-unit">°C</span>
                    </div>
                    </div>
                    
                    <div class="sensor-item">
                        <div class="sensor-label">发动机温度</div>
                        <div class="sensor-value">
                            <span id="engine-temp">0</span>
                            <span class="sensor-unit">°C</span>
                    </div>
                    </div>
                    
                    <div class="sensor-item">
                        <div class="sensor-label">热水端温度</div>
                        <div class="sensor-value">
                            <span id="hot-water-temp">0</span>
                            <span class="sensor-unit">°C</span>
                    </div>
                    </div>
                    
                    <div class="sensor-item">
                        <div class="sensor-label">制冷端温度</div>
                        <div class="sensor-value">
                            <span id="cooling-temp">0</span>
                            <span class="sensor-unit">°C</span>
                    </div>
                </div>
                    
                    <div class="sensor-item">
                        <div class="sensor-label">箱体温度</div>
                        <div class="sensor-value">
                            <span id="box-temp">0</span>
                            <span class="sensor-unit">°C</span>
            </div>
        </div>

                    <div class="sensor-item">
                        <div class="sensor-label">油箱液位</div>
                        <div class="sensor-value">
                            <span id="fuel-level">0</span>
                            <span class="sensor-unit">%</span>
                        </div>
                </div>
                    
                    <div class="sensor-item">
                        <div class="sensor-label">水箱液位</div>
                        <div class="sensor-value">
                            <span id="water-level">0</span>
                            <span class="sensor-unit">%</span>
                </div>
                </div>
                </div>
            </div>
        </div>
    </div>
    
    <script>
        // WebSocket连接
        const socket = io();
        
        // 运动控制状态
        let currentMovement = { forward: 0, turn: 0 };
        let activeKeys = new Set();
        
        // 连接状态处理
        socket.on('connect', function() {
            console.log('WebSocket连接成功');
        });
        
        socket.on('disconnect', function() {
            console.log('WebSocket连接断开');
        });
        
        // 状态更新
        socket.on('status_update', function(status) {
            updateConnectionStatus(status);
            updateSensorData(status.sensors);
            updateControlStatus(status.controls);
        });
        
        // 更新连接状态显示
        function updateConnectionStatus(status) {
            const rk3588Status = document.getElementById('rk3588-status');
            const rk3588Text = document.getElementById('rk3588-text');
            const plcStatus = document.getElementById('plc-status');
            const plcText = document.getElementById('plc-text');
            const modeText = document.getElementById('mode-text');
            
            // RK3588连接状态
            if (status.rk3588_connected) {
                rk3588Status.className = 'status-item status-connected';
                rk3588Text.textContent = '已连接';
            } else {
                rk3588Status.className = 'status-item status-disconnected pulse';
                rk3588Text.textContent = '未连接';
            }
            
            // PLC连接状态
            if (status.plc_connected) {
                plcStatus.className = 'status-item status-connected';
                plcText.textContent = '已连接';
            } else {
                plcStatus.className = 'status-item status-disconnected pulse';
                plcText.textContent = '未连接';
            }
            
            // 控制模式
            modeText.textContent = status.control_mode === 1 ? '远程' : '本地';
        }
        
        // 更新传感器数据
        function updateSensorData(sensors) {
            // 按照协议说明转换单位
            // 电压和电流：原始值÷100
            document.getElementById('generator-voltage').textContent = ((sensors.generator_voltage || 0) / 100).toFixed(2);
            document.getElementById('generator-current').textContent = ((sensors.generator_current || 0) / 100).toFixed(2);
            
            // 功率：原始值直接使用
            document.getElementById('generator-power').textContent = sensors.generator_power || 0;
            
            // 所有温度：原始值÷10
            document.getElementById('generator-temp').textContent = ((sensors.generator_temp || 0) / 10).toFixed(1);
            document.getElementById('engine-temp').textContent = ((sensors.engine_temp || 0) / 10).toFixed(1);
            document.getElementById('hot-water-temp').textContent = ((sensors.hot_water_temp || 0) / 10).toFixed(1);
            document.getElementById('cooling-temp').textContent = ((sensors.cooling_temp || 0) / 10).toFixed(1);
            document.getElementById('box-temp').textContent = ((sensors.box_temp || 0) / 10).toFixed(1);
            
            // 液位：原始值直接使用（百分比）
            document.getElementById('fuel-level').textContent = sensors.fuel_level || 0;
            document.getElementById('water-level').textContent = sensors.water_level || 0;
        }
        
        // 更新控制状态 - 已简化
        function updateControlStatus(controls) {
            // 不需要更新任何控制状态
        }
        
        // WASD按键控制
        const wasdKeys = document.querySelectorAll('.wasd-key');
        
        // 鼠标事件
        wasdKeys.forEach(key => {
            key.addEventListener('mousedown', function() {
                const direction = this.getAttribute('data-direction');
                handleKeyPress(direction, true);
                this.classList.add('active');
            });
            
            key.addEventListener('mouseup', function() {
                const direction = this.getAttribute('data-direction');
                handleKeyPress(direction, false);
                this.classList.remove('active');
            });
            
            key.addEventListener('mouseleave', function() {
                const direction = this.getAttribute('data-direction');
                handleKeyPress(direction, false);
                this.classList.remove('active');
            });
        });
        
        // 键盘事件
        document.addEventListener('keydown', function(e) {
            const key = e.key.toLowerCase();
            if (['w', 'a', 's', 'd'].includes(key) && !activeKeys.has(key)) {
                activeKeys.add(key);
                const direction = getDirectionFromKey(key);
                handleKeyPress(direction, true);
                
                // 视觉反馈
                const keyElement = document.querySelector(`.key-${key}`);
                if (keyElement) {
                    keyElement.classList.add('active');
                }
            }
        });
        
        document.addEventListener('keyup', function(e) {
            const key = e.key.toLowerCase();
            if (['w', 'a', 's', 'd'].includes(key) && activeKeys.has(key)) {
                activeKeys.delete(key);
                const direction = getDirectionFromKey(key);
                handleKeyPress(direction, false);
                
                // 视觉反馈
                const keyElement = document.querySelector(`.key-${key}`);
                if (keyElement) {
                    keyElement.classList.remove('active');
                }
            }
        });
        
        function getDirectionFromKey(key) {
            const keyMap = {
                'w': 'forward',
                's': 'backward',
                'a': 'left',
                'd': 'right'
            };
            return keyMap[key];
        }
        
        function handleKeyPress(direction, isPressed) {
            const moveSpeed = 15; // 移动速度
            const turnSpeed = 8;  // 转向速度
            
            switch (direction) {
                case 'forward':
                    currentMovement.forward = isPressed ? moveSpeed : 0;
                    break;
                case 'backward':
                    currentMovement.forward = isPressed ? -moveSpeed : 0;
                    break;
                case 'left':
                    currentMovement.turn = isPressed ? -turnSpeed : 0;
                    break;
                case 'right':
                    currentMovement.turn = isPressed ? turnSpeed : 0;
                    break;
            }
            
            sendMovementCommand();
        }
        
        let lastMovement = { forward: 0, turn: 0 };  // 记录上次的移动状态
        
        function sendMovementCommand() {
            // 更新显示
            document.getElementById('forward-value').textContent = currentMovement.forward;
            document.getElementById('turn-value').textContent = currentMovement.turn;
            
            // 只在状态发生变化时才发送（避免重复发送相同的值）
            if (currentMovement.forward !== lastMovement.forward || currentMovement.turn !== lastMovement.turn) {
                socket.emit('movement_control', currentMovement);
                lastMovement.forward = currentMovement.forward;
                lastMovement.turn = currentMovement.turn;
            }
        }
        
        // 运动控制响应
        socket.on('movement_response', function(response) {
            if (!response.success) {
                console.error('运动控制失败:', response.error);
            }
        });
        
        // 检测USB设备按钮
        document.getElementById('check-usb').addEventListener('click', function() {
            console.log('检测USB设备...');
            socket.emit('check_usb');
            
            this.style.opacity = '0.6';
            setTimeout(() => {
                this.style.opacity = '1';
            }, 300);
        });
        
        // 连接PLC按钮
        document.getElementById('connect-plc').addEventListener('click', function() {
            console.log('连接PLC...');
            socket.emit('connect_plc');
            
            this.style.opacity = '0.6';
            setTimeout(() => {
                this.style.opacity = '1';
            }, 300);
        });
        
        // 刷新传感器按钮 - 手动读取PLC数据
        document.getElementById('refresh-sensors').addEventListener('click', function() {
            console.log('手动请求PLC数据...');
            socket.emit('request_sensor_data');
            
            this.style.opacity = '0.6';
            setTimeout(() => {
                this.style.opacity = '1';
            }, 300);
        });
        
        // 切换控制权限按钮
        let currentAuthority = 0; // 0=本地遥控, 1=远程控制
        document.getElementById('toggle-authority').addEventListener('click', function() {
            const newAuthority = currentAuthority === 0 ? 1 : 0;
            const modeText = newAuthority === 1 ? '远程控制' : '本地遥控';
            
            if (confirm(`确定要切换到 ${modeText} 模式吗？\n\n⚠️ 警告：切换到远程控制会影响伺服电机和原生遥控器！`)) {
                console.log(`切换控制权限: ${modeText}`);
                socket.emit('control_command', {
                    type: 'control_authority',
                    value: newAuthority
                });
                
                this.style.opacity = '0.6';
                setTimeout(() => {
                    this.style.opacity = '1';
                }, 300);
            }
        });
        
        // 喷水控制按钮
        let waterSprayOn = false; // false=关闭, true=打开
        document.getElementById('toggle-water-spray').addEventListener('click', function() {
            waterSprayOn = !waterSprayOn;
            const statusText = waterSprayOn ? '打开' : '关闭';
            
            console.log(`喷水控制: ${statusText}`);
            socket.emit('control_command', {
                type: 'water_spray',
                value: waterSprayOn ? 1 : 0
            });
            
            // 更新按钮显示
            this.textContent = waterSprayOn ? '💧 喷水: 开启' : '💧 喷水: 关闭';
            this.style.background = waterSprayOn ? 
                'linear-gradient(145deg, #4CAF50, #45a049)' : 
                'linear-gradient(145deg, #00BCD4, #0097A7)';
            
            this.style.opacity = '0.6';
            setTimeout(() => {
                this.style.opacity = '1';
            }, 300);
        });
        
        // 持续前进测试按钮
        document.getElementById('continuous-forward').addEventListener('click', function() {
            if (confirm('机器将持续前进5秒，请确保前方安全！\n\n确定要开始测试吗？')) {
                console.log('持续前进测试: 开始');
                
                this.disabled = true;
                this.textContent = '🚀 前进中...';
                
                // 发送持续前进命令
                socket.emit('continuous_forward_test', {
                    duration: 5000  // 5秒
                });
                
                // 5秒后恢复按钮
                setTimeout(() => {
                    this.disabled = false;
                    this.textContent = '🚀 持续前进测试 (5秒)';
                }, 6000);
            }
        });
        
        // USB检测结果
        socket.on('usb_check_result', function(data) {
            const statusDiv = document.getElementById('connection-status');
            const connectBtn = document.getElementById('connect-plc');
            
            if (data.result.success) {
                statusDiv.innerHTML = '<small style="color: #4CAF50;">✅ USB设备检测成功: ' + 
                    data.result.devices.join(', ') + '</small>';
                connectBtn.disabled = false;
                console.log('✅ USB设备:', data.result.devices);
            } else {
                statusDiv.innerHTML = '<small style="color: #f44336;">❌ ' + 
                    data.result.message + '，请插入USB转485设备</small>';
                connectBtn.disabled = true;
                console.error('❌ USB检测失败');
            }
        });
        
        // PLC连接结果
        socket.on('plc_connect_result', function(data) {
            const statusDiv = document.getElementById('connection-status');
            const refreshBtn = document.getElementById('refresh-sensors');
            const authorityBtn = document.getElementById('toggle-authority');
            const waterSprayBtn = document.getElementById('toggle-water-spray');
            const continuousForwardBtn = document.getElementById('continuous-forward');
            
            if (data.result.success) {
                statusDiv.innerHTML = '<small style="color: #4CAF50;">✅ ' + 
                    data.result.message + '，可以读取PLC数据了</small>';
                refreshBtn.disabled = false;
                authorityBtn.disabled = false;
                waterSprayBtn.disabled = false;
                continuousForwardBtn.disabled = false;
                console.log('✅ PLC已连接，控制按钮已启用');
            } else {
                statusDiv.innerHTML = '<small style="color: #f44336;">❌ ' + 
                    data.result.message + '，请检查PLC设备</small>';
                refreshBtn.disabled = true;
                authorityBtn.disabled = true;
                waterSprayBtn.disabled = true;
                continuousForwardBtn.disabled = true;
                console.error('❌ PLC连接失败');
            }
        });
        
        // 控制响应
        socket.on('control_response', function(response) {
            if (response.success) {
                // 更新状态
                if (response.type === 'control_authority') {
                    currentAuthority = response.value;
                    const modeText = response.value === 1 ? '远程控制' : '本地遥控';
                    console.log(`✅ 控制权限已切换: ${modeText}`);
                    
                    // 更新页面显示的控制模式
                    const modeSpan = document.querySelector('.status-item:nth-child(3) .status-value');
                    if (modeSpan) {
                        modeSpan.textContent = modeText;
                    }
                } else if (response.type === 'water_spray') {
                    console.log(`✅ 喷水控制: ${response.value === 1 ? '开启' : '关闭'}`);
                }
            } else {
                console.error('控制命令失败:', response.error);
            }
        });
        
        // 传感器响应
        socket.on('sensor_response', function(response) {
            if (response.success) {
                updateSensorData(response.sensors);
                console.log('✅ PLC数据已更新');
            } else {
                console.error('获取传感器数据失败:', response.error);
            }
        });
        
        // 不再自动刷新，改为手动点击按钮获取
        console.log('✅ PLC控制系统前端已加载');
        console.log('⚠️ 安全模式：只允许WASD移动控制，点击按钮手动读取PLC数据');
    </script>
</body>
</html>
